<template>
  <div class="oe-review-teacher" v-loading="loading">
    <top-tip v-if="!stepMode && batchTitle" :examTitle="examTitle" :batchTitle="batchTitle" :title="titleList" :goManage="true" :batchid="batchid"></top-tip>
    <div class="oe-manage-content">
      <div class="oe-manage-content__search">
        <!-- <span class="oe-search-label">姓名/工号：</span>
        <span class="oe-search-input">
          <a-input v-model="searchName" placeholder="请输入姓名/工号"></a-input>
        </span>
        <a-button type="primary" @click="searchTeacherForType()">查询</a-button> -->
        <span  v-if="operationList.includes('add/edit/del:mark')">
        <a-button type="primary" @click="setDataShow()" v-if="editShow && ReviewList.length > 0">编辑</a-button>
        <a-button type="primary" @click="getAddReviewList()" v-else>新增批题组</a-button>
        </span>
      </div>
      <div class="oe-manage-content__table">
        <div class="oe-manage-lis clearfix" v-for="(item,index) in ReviewList" :key="index">
          <div class="oe-manage-question">
            <a-select
              mode="multiple"
              :disabled="editShow"
              placeholder="请选择批阅题型"
              v-model="item.questionList"
              style="width: 100%"
              @select="select"
              @deselect="deselect"
            >
              <a-select-option v-for="value in newQuestionType" :key="value.label">{{ value.label }}</a-select-option>
            </a-select>
          </div>
          <div class="oe-manage-question">
            <a-select
              mode="multiple"
              :disabled="editShow"
              placeholder="请选择批阅老师"
              v-model="item.teacherList"
              style="width: 100%"
              @select="teacherSelect"
              @deselect="teacherDeselect"
            >
              <a-select-option
                v-for="value in newTeacherName"
                :key="value.DisplayName"
              >{{ value.DisplayName }}</a-select-option>
            </a-select>
          </div>
          <div class="oe-manage-operation">
            <a-checkbox
              value="IsAnonymous"
              :disabled="editShow"
              :checked="item.anonymousType == 1"
              @change="getAnonymousType(index)"
            >隐藏考生信息</a-checkbox>
            <i class="iconfont icon-delete" @click="getDeleteData(item,index)" v-if="editShow && operationList.includes('add/edit/del:mark')"></i>
          </div>
        </div>
        <div style="text-align: center;padding: 10px 0px;">
          <a-button type="primary" @click="getSave(index)" v-if="!editShow">保存</a-button>
          <a-button @click="getCancel()" style="margin-left: 10px;" v-if="!editShow">取消</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  mixins: [GetOperationList],
  name: 'reviewTeacher',
  components: {
    topTip
  },
  data() {
    return {
      //搜索
      editShow: true,
      searchName: '',
      ReviewList: [],
      questionType: [
        { value: 4, label: '客观填空题', show: true },
        { value: 5, label: '主观填空题', show: true },
        { value: 6, label: '问答题', show: true },
        { value: 12, label: '阅读理解问答题', show: true },
        { value: 13, label: '完型填空问答题', show: true }
      ],
      questionType1: [
        { value: 4, label: '客观填空题', show: true },
        { value: 5, label: '主观填空题', show: true },
        { value: 6, label: '问答题', show: true },
        { value: 12, label: '阅读理解问答题', show: true },
        { value: 13, label: '完型填空问答题', show: true }
      ],
      teacherName: [],
      teacherName1: [],
      selectedItems: [],
      getType: 1,
      loading: false,
      IsAnonymous: false,
      DeleteNum: NaN,
      fecthing: false,
      operationList: [],
      batchTitle:'',
      examTitle:'',
    };
  },
  props: {
    examid: {
      type: String,
      default: ''
    },
    batchid: {
      type: String,
      default: ''
    },
    stepMode:{
      type:Boolean,
      default:false
    }
  },
  computed: {
    title() {
      if (this.$route.name == 'proctorTeacher') {
        return `监考`;
      } else {
        return `批阅`;
      }
    },
    titleList() {
      if (this.$route.name == 'proctorTeacher') {
        return [{ text: '考试管理' }, { text: '监考教师', color: '#0177D5' }];
      } else {
        return [{ text: '考试管理' }, { text: '批阅教师', color: '#0177D5' }];
      }
    },
    //获取当前路由名称
    type() {
      return this.$route.name;
    },
    importTitle() {
      if (this.$route.name == 'proctorTeacher') {
        return `导入监考教师`;
      } else {
        return `导入批阅教师`;
      }
    },
    newQuestionType: function() {
      return this.questionType.filter((item) => item.show);
    },
    newTeacherName: function() {
      return this.teacherName.filter((item) => item.show);
    }
  },
  mounted() {
    this.getReviewTeacherList();
    this.getOpeartion()
  },
  methods: {
    setDataShow() {
      this.editShow = !this.editShow;
    },
    getCancel() {
      this.getReviewTeacherList();
      this.setDataShow();
    },
    getAddReviewList() {
      if (this.editShow == true) {
        this.editShow = false;
      }
      var questionShow = false;
      var teacherShow = false;
      for (let i = 0; i < this.ReviewList.length; i++) {
        if (this.ReviewList[i].questionList.length < 1) {
          questionShow = true;
        }
        if (this.ReviewList[i].teacherList.length < 1) {
          teacherShow = true;
        }
      }
      if (questionShow) {
        return this.$message.warning('未选择批阅题型，不可添加');
      }
      if (teacherShow) {
        return this.$message.warning('未选择批阅教师，不可添加');
      }
      if (this.newQuestionType.length < 1) {
        return this.$message.warning('已无批阅题型');
      }
      if (this.newTeacherName.length < 1) {
        return this.$message.warning('已无批阅教师');
      }
      var lis = {questionGroupId: '', questionList: [], teacherList: [], anonymousType: 0 };
      this.ReviewList.push(lis);
    },
    //获取批阅教师
    getReviewTeacherList(sort) {
      this.loading = true;
      var that = this;
      this.getType = 1;
      this.teacherName = [];
      this.$http
        .post('/api/design/Marking/getTeaList', {
          getType: this.getType,
          examId: this.examid,
          key: this.searchName,
          schoolName: '',
          noPage: 1,
          // page: 1,
          // pageSize: 100
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            if (rst.list.length) {
              this.teacherName = rst.list.map((item) => {
                return { ...item, show: true };
              });
            }
            this.getMarkQuestionGroupList();
          } else {
            that.$message.warning(rst.msg);
          }
          this.fecthing = false;
        });
    },
    //获取批阅题组
    getMarkQuestionGroupList() {
      this.loading = true;
      var that = this;
      this.$http
        .post('/api/design/marking/getMarkQuestionGroupList', {
          examId: this.examid
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.setData(rst.list);
          } else {
            that.$message.warning(rst.msg);
          }
        });
    },
    setData(data) {
      this.ReviewList = [];
      this.questionType = [
        { value: 4, label: '客观填空题', show: true },
        { value: 5, label: '主观填空题', show: true },
        { value: 6, label: '问答题', show: true },
        { value: 12, label: '阅读理解问答题', show: true },
        { value: 13, label: '完型填空问答题', show: true }
      ];
      for (let i = 0; i < data.length; i++) {
        var lis = {questionGroupId: data[i].QuestionGroupId, questionList: [], teacherList: [], anonymousType: data[i].IsAnonymous }; 
        var questionList = data[i].QuestionGroupType.split(',').map(Number); 
        var teacherList = data[i].MarkTeacherIds.split(',');
        for (let key = 0; key < questionList.length; key++) {
          for (let index = 0; index < this.newQuestionType.length; index++) {
            if (questionList[key] == this.newQuestionType[index].value) {
              let name = this.newQuestionType[index].label
              lis.questionList.push(name);
              this.changeShow(this.newQuestionType, name, 'label', false);
            }
          }
        }
        for (let key = 0; key < teacherList.length; key++) {
          for (let index = 0; index < this.newTeacherName.length; index++) {
            if (teacherList[key] == this.newTeacherName[index].Id) {
              let name = this.newTeacherName[index].DisplayName
              lis.teacherList.push(name);
              this.changeShow(this.newTeacherName, name, 'DisplayName', false);
            }
          }
        }
        this.ReviewList.push(lis);
      }
    },
    select(value) {
      this.changeShow(this.newQuestionType, value, 'label', false);
    },
    deselect(value) {
      this.changeShow(this.questionType, value, 'label', true);
    },
    teacherSelect(value) {
      this.changeShow(this.newTeacherName, value, 'DisplayName', false);
    },
    teacherDeselect(value) {
      this.changeShow(this.teacherName, value, 'DisplayName', true);
    },
    getDeleteData(item,index) {
      this.DeleteNum = index;
      if (item.questionGroupId) {
        this.deleteMarkQuestionGroup(item.questionGroupId,index);
      } else {
        this.deleteData(index);
      }
    },
    deleteMarkQuestionGroup(questionGroupId,index) {
      this.$http
        .post('/api/design/Marking/deleteMarkQuestionGroup', {
          questionGroupId: questionGroupId
        }).then((rst) => {
          this.loading = false;
          let that = this;
          if (rst.code > 0) {
            this.deleteData(index);
            this.$message.success(rst.msg);
            this.stepMode && this.$parent.getExamStatus(2)
          } else {
            that.$message.warning(rst.msg);
          }
        });
    },
    deleteData(index) {
      if (this.ReviewList[index].teacherList.length > 0) {
        this.ReviewList[index].teacherList.forEach((value) => {
          this.changeShow(this.teacherName, value, 'DisplayName', true);
        });
      }
      if (this.ReviewList[index].questionList.length > 0) {
        this.ReviewList[index].questionList.forEach((value) => {
          this.changeShow(this.questionType, value, 'label', true);
        });
      }
      this.ReviewList.splice(index, 1);
    },
    // 获取页面操作
    getOpeartion() {
      this.loading = true;
      this.GetOperationList('examId',this.examid).then((rst) => {
        this.loading = false;
        if (rst.code === 1) {
          if (rst.list.length) {
            rst.list.forEach((item) => {
              if(item.IsWrite){
              this.operationList.push(item.Name);
              }
            });
            // this.operationList = rst.list;
          }
          this.examTitle = rst.examTitle
          this.batchTitle = rst.batchTitle
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    changeShow(data, value, name, status) {
      Array.isArray(data) &&
        data.forEach((item) => {
          item[name] === value && (item.show = status);
        });
    },
    getAnonymousType(index) {
      if (this.ReviewList[index].anonymousType == 0) {
        this.ReviewList[index].anonymousType = 1;
      } else {
        this.ReviewList[index].anonymousType = 0;
      }
    },
    getSave() {
      var lis = [];
      for (let index = 0; index < this.ReviewList.length; index++) {
        let data = {
          questionGroupId: '',
          questionGroupType: [],
          markTeacherIds: [],
          anonymousType: '',
        }
        data.questionGroupId = this.ReviewList[index].questionGroupId;
        data.anonymousType = this.ReviewList[index].anonymousType;
        // 题组类型组合
        if (this.ReviewList[index].questionList.length > 0) {
          for (let i = 0; i < this.ReviewList[index].questionList.length; i++) {
            for (let key = 0; key < this.questionType.length; key++) {
              if (this.ReviewList[index].questionList[i] == this.questionType[key].label) {
                data.questionGroupType.push(this.questionType[key].value);
              }
            }
          };
        } else {
          return this.$message.warning('未选择批阅题型');
        };
        // 批阅老师Ids
        if (this.ReviewList[index].teacherList.length > 0) {
          for (let i = 0; i < this.ReviewList[index].teacherList.length; i++) {
            for (let key = 0; key < this.teacherName.length; key++) {
              if (this.ReviewList[index].teacherList[i] === this.teacherName[key].DisplayName) {
                data.markTeacherIds.push(this.teacherName[key].Id);
              }
            }
          };
        } else {
          return this.$message.warning('未选择批阅教师');
        };
        data.questionGroupType = data.questionGroupType.join(',');
        // data.markTeacherIds = data.markTeacherIds.join(',');
        lis.push(data);
      }
      this.setMarkQuestionGroup(lis);
    },
    
    setMarkQuestionGroup(data) {
      this.$http
        .post('/api/design/marking/setMarkQuestionGroup', {
          examId: this.examid, //考试Id
          questionGroupJson: JSON.stringify(data), //批阅题组
        })
        .then((rst) => {
          if (rst.code > 0) {
            this.$message.success(rst.msg);
            this.stepMode && this.$parent.getExamStatus(2)
            this.getCancel();
          } else {
            this.$message.warning(rst.msg);
          }
        });
    }
  }
};
</script>
